<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多快好省，购物上京东！</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>

<body>
    <header>
        <!-- 搜索栏 -->
        <div class="search-box">
            <div class="left"></div>
            <div class="search-input">
                <span class="jd-icon"></span>
                <span class=line></span>
                <span class="searchIcon"></span>
                <div class="ipt">
                    <input type="text" placeholder="恒温调奶器">
                </div>
            </div>
            <div class="login">登录</div>
        </div>
        <!-- 搜索栏结束 -->
        <!-- 焦点图区域 -->
        <div class="focus">
            <div class="focusList">
                <div class="focusPic">
                    <a href="#">
                        <img src="images/focus01.dpg" alt="">
                    </a>
                    <a href="#">
                        <img src="images/focus02.dpg" alt="">
                    </a>
                    <a href="#">
                        <img src="images/focus03.dpg" alt="">
                    </a>
                    <a href="#">
                        <img src="images/focus04.dpg" alt="">
                    </a>
                </div>
                <ol class="circle">
                    <li></li>
                    <li class='current'></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>
        <!-- 焦点图区域结束 -->
    </header>
    <!-- 11.11主会场 -->
    <div class="store">
        <div class="content">
            <a href="#">
                <img src="images/product11-01.dpg" alt="">
                <p>5折清单</p>
            </a>
            <a href="#">
                <img src="images/product11-02.dpg" alt="">
                <p>券299减120</p>
            </a>
        </div>
        <div class="content">
            <a href="">
                <img src="images/product11-03.dpg" alt="">
                <img src="images/product11-04.dpg" alt="">
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="images/product11-05.dpg" alt="">
                <p>抢底价家电</p>
            </a>
            <a href="#">
                <img src="images/product11-06.dpg" alt="">
                <p>3折抢爆品</p>
            </a>
        </div>
    </div>
    <!-- 11.11主会场结束 -->
    <!-- 导航部分 -->
    <nav>
        <div class="nav-list">
            <a href="#" class="nav-item">
                <img src="images/nav-icon01.png" alt="">
                <p>京东超市</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon02.png" alt="">
                <p>数码电器</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon03.png" alt="">
                <p>京东服饰</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon04.png" alt="">
                <p>京东生鲜</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon05.png" alt="">
                <p>京东到家</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon06.png" alt="">
                <p>充值缴费</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon07.png" alt="">
                <p>9.9元拼</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon08.png" alt="">
                <p>领券</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon09.png" alt="">
                <p>借钱</p>
            </a>
            <a href="#" class="nav-item">
                <img src="images/nav-icon10.png" alt="">
                <p>PLUS会员</p>
            </a>
        </div>
        <ol class="nav-cicle">
            <li class="current"></li>
            <li></li>
        </ol>
    </nav>
    <!-- 主体部分 -->
    <main>
        <!-- 正品区域 -->
        <div class="quality">
            <a href="#">
                <p></p>
                <p>正品直邮</p>
                <img src="images/product6-01.dpg" alt="">
            </a>
            <a href="#">
                <p>来电好货</p>
                <p>3C大放价</p>
                <img src="images/product6-02.dpg" alt="">
            </a>
            <a href="#">
                <p>国潮风尚</p>
                <p>正品直邮</p>
                <img src="images/product6-03.dpg" alt="">
            </a>
            <a href="#">
                <p></p>
                <p>都是你爱的</p>
                <img src="images/product6-04.dpg" alt="">
            </a>
        </div>
        <!-- 京东秒杀 -->
        <div class="seckill">
            <div class="top">
                <div class="top-l">
                    <div class="jd-sk">京东秒杀</div>
                    <div class="hour">20</div>
                    <div class="seckill-time">
                        <div class="h">00</div>
                        <span>:</span>
                        <div class="h">00 </div>
                        <span>:</span>
                        <div class="h">00</div>
                    </div>
                </div>
                <div class="top-r">
                    更多秒杀
                    <span></span>
                </div>
            </div>
            <ul class="seckill-content">
                <li class="seckill-item">
                    <a href="#">
                        <img src="images/product55-01.dpg" alt="">
                        <p>¥3498</p>
                        <p>¥3699</p>
                    </a>
                </li>
                <li class="seckill-item">
                    <a href="#">
                        <img src="images/product55-02.dpg" alt="">
                        <p>¥288</p>
                        <p>¥369</p>
                    </a>
                </li>
                <li class="seckill-item">
                    <a href="#">
                        <img src="images/product55-03.dpg" alt="">
                        <p>¥5588</p>
                        <p>¥6899</p>
                    </a>
                </li>
                <li class="seckill-item">
                    <a href="#">
                        <img src="images/product55-04.dpg" alt="">
                        <p>¥458</p>
                        <p>¥529</p>
                    </a>
                </li>
                <li class="seckill-item">
                    <a href="#">
                        <img src="images/product55-05.png" alt="">
                        <p>¥15842</p>
                        <p>¥16000</p>
                    </a>
                </li>
                <li class="seckill-item">
                    <a href="#">
                        <img src="images/product55-06.dpg" alt="">
                        <p>¥1588</p>
                        <p>¥1699</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 精心推荐 -->
        <div class="recommend">
            <div class="recommendList">
                <a class="recommendItem">
                    <img src="images/product63-01.dpg" alt="">
                    <p>壶铃榜</p>
                    <p>2.9万人买过</p>
                </a>
                <a class="recommendItem">
                    <img src="images/product63-02.dpg" alt="">
                    <p>网球鞋榜</p>
                    <p>2000+人买过</p>
                </a>
                <a class="recommendItem">
                    <img src="images/product63-03.dpg" alt="">
                    <p>外设精良</p>
                    <p>神奇旧变新</p>
                </a>
                <a class="recommendItem">
                    <img src="images/product63-04.dpg" alt="">
                    <p>大电池</p>
                    <p>通话享无忧</p>
                </a>
            </div>
        </div>
        <!-- 11.11精选会场 -->
        <div class="selection">
            <div class="selection-title"></div>
            <div class="selection-content">
                <div class="pic">
                    <img src="images/selection01.dpg" alt="">
                </div>
                <div class="pic">
                    <img src="images/selection02.dpg" alt="">
                </div>
                <div class="pic">
                    <img src="images/selection03.dpg" alt="">
                </div>
            </div>
        </div>
        <!-- 东家小院 -->
        <div class="courtyard">
            <div class="courtyard-title"></div>
            <div class="courtyard-content">
                <div class="courtyard-top">
                    <a href="#">
                        <p>电脑专家</p>
                        <p>DIY你的电脑</p>
                        <div>
                            <img src="images/product60-01.dpg" alt="">
                            <img src="images/product60-02.dpg" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <p>浪漫赏樱</p>
                        <p>春季赏樱必备</p>
                        <div>
                            <img src="images/product60-03.dpg" alt="">
                            <img src="images/product60-04.dpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="courtyard-bottom">
                    <a href="#">
                        <p>国机自强</p>
                        <p>全新体验</p>
                        <div>
                            <img src="images/product60-05.dpg" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <p>重塑弹润</p>
                        <p>物造潮形象</p>
                        <div>
                            <img src="images/product60-06.dpg" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <p>颜值机箱</p>
                        <p>个性机箱</p>
                        <div>
                            <img src="images/product60-07.dpg" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <p>名媛风</p>
                        <p>你最珍贵</p>
                        <div>
                            <img src="images/product60-08.dpg" alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 为你推荐 -->
        <div class="recommendforYou">
            <div class="top-bg"></div>
            <div class="recommendProduct">
                <ul>
                    <li>
                        <img src="images/product01.webp" alt="">
                        <div class="des">
                            <span></span>
                            <span></span> 精工（SEIKO）手表 PROSPEX Street Series系列200米防水运动石英白色太阳能罐头男表 SNE545P1
                        </div>
                        <div class="price">
                            <div class="p-l">
                                <span>¥ 2939</span>
                                <span>满减</span>
                            </div>
                            <div class="p-r">看相似</div>
                        </div>
                        <div class="footer"></div>
                    </li>
                    <li>
                        <img src="images/product02.webp" alt="">
                        <div class="des">
                            <span></span>
                            <span></span> 超媛男士长袖T恤青少年套装潮流帅气中学生秋衣小衫秋装卫衣男春秋款1F-1052# 1112 蓝色 M
                        </div>
                        <div class="price">
                            <div class="p-l">
                                <span>¥ 88. <i>9</i></span>
                            </div>
                            <div class="p-r">看相似</div>
                        </div>
                        <div class="footer"></div>
                    </li>
                    <li>
                        <img src="images/product03.webp" alt="">
                        <div class="des">
                            <span></span>
                            <span></span> 探巡 马丁靴男冬季男靴加绒保暖英伦男鞋休闲大头皮鞋男百搭复古透气工装鞋子耐磨沙漠靴短靴 L9030-黑色 44
                        </div>
                        <div class="price">
                            <div class="p-l">
                                <span>¥ 178</span>
                                <span>闪购</span>
                            </div>
                            <div class="p-r">看相似</div>
                        </div>
                        <div class="footer"></div>
                    </li>
                    <li>
                        <img src="images/product04.webp" alt="">
                        <div class="des">
                            <span></span>
                            <span></span>小米 米家 净水器 前置活性炭滤芯
                        </div>
                        <div class="price">
                            <div class="p-l">
                                <span>¥ 69</span>
                            </div>
                            <div class="p-r">看相似</div>
                        </div>
                        <div class="footer"></div>
                    </li>
                    <li>
                        <img src="images/product05.webp" alt="">
                        <div class="des">
                            NOVOHOME 吊灯 卧室灯轻奢后现代卧室吊灯客厅灯创意皇冠灯设计师新款 豪华款 直径60CM（默认中性光） LED
                        </div>
                        <div class="price">
                            <div class="p-l">
                                <span>¥ 880</span>
                                <span>满减</span>
                            </div>
                            <div class="p-r">看相似</div>
                        </div>
                        <div class="footer"></div>
                    </li>
                    <li>
                        <img src="images/product06.webp" alt="">
                        <div class="des">
                            超媛男士长袖T恤秋季卫衣圆领体恤纯棉秋衣打底衫潮流丅恤秋装上衣服1F-1052# 1111 白色 M
                        </div>
                        <div class="price">
                            <div class="p-l">
                                <span>¥ 88. <i>9</i></span>
                            </div>
                            <div class="p-r">看相似</div>
                        </div>
                        <div class="footer"></div>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <!-- 底部导航 -->
    <footer>
        <div class="footerItem"></div>
        <div class="footerItem"></div>
        <div class="footerItem"></div>
        <div class="footerItem"></div>
        <div class="footerItem"></div>
    </footer>
</body>

</html>